var xhr = new XMLHttpRequest();
xhr.open("GET", "coffee.php?hide=getproduct");
xhr.send(null);
xhr.onreadystatechange = () => {
    if (xhr.status == 200 && xhr.readyState == 4) {
        var arr = JSON.parse(xhr.responseText);
        var boximgs = document.querySelectorAll(".section3 .boxs .box .pic>img");
        var boxttitles = document.querySelectorAll(".section3 .boxs .box .text .ttitle");
        var boxcontents = document.querySelectorAll(".section3 .boxs .box .text .content");
        arr.forEach((v, i) => {
            for (var j in v) {
                if (j == "src") {
                    boximgs[i].src = v[j];
                } else if (j == "name") {
                    boxttitles[i].innerHTML = v[j];
                }else if (j == "introduction") {
                    boxcontents[i].innerHTML = v[j];
                }
            }
        })
    }
}

var xhr2 = new XMLHttpRequest();
xhr2.open("GET", "coffee.php?hide=getteam");
xhr2.send(null);
xhr2.onreadystatechange = () => {
    if (xhr2.status == 200 && xhr2.readyState == 4) {
        var arr = JSON.parse(xhr2.responseText);
        console.log(arr);
        var boximgs = document.querySelectorAll(".section4 .boxs .box .pic>img");
        var boxttitles = document.querySelectorAll(".section4 .boxs .box .b1 .ttitle");
        var ens = document.querySelectorAll(".section4 .boxs .box .b1 .enname");
        var boxcontents = document.querySelectorAll(".section4 .boxs .box .b1 .content");
        console.log(boximgs)
        arr.forEach((v, i) => {
            for (var j in v) {
                if (j == "src_index") {
                    boximgs[i].src = v[j];
                } else if (j == "name") {
                    boxttitles[i].innerHTML = v[j];
                }else if (j == "introduction") {
                    boxcontents[i].innerHTML = v[j];
                }else if (j == "name_en") {
                    ens[i].innerHTML = v[j];
                }
            }
        })
    }
}



//轮播
var btn = carousel.getElementsByTagName("button"),
    lis = carousel.getElementsByTagName("li"),
    imgs = carousel.getElementsByTagName("img"),
    k = 0;
for (var i = 0; i < btn.length; i++) {
    btn[i].onclick = function () {
        rotation(parseInt(this.getAttribute("zl")));
    }
}

for (var i in lis) {
    lis[i].onclick = function () {
        rotation(0, this);
    }
}

timer = setInterval(function () {
    rotation(1);
}, 3000);

carousel.onmouseout = function () {
    timer = setInterval(function () {
        rotation(1);
    }, 3000);
};
carousel.onmouseover = function () {
    clearTimeout(timer);
};

function rotation(key, liactive) {
    key ? k += key : k = parseInt(liactive.getAttribute("zl"));
    k == lis.length ? k = 0 : k == -1 ? k = lis.length - 1 : k;

    for (var i in lis) {
        imgs[i].className = "";
        lis[i].className = "";
    }
    imgs[k].className = "active";
    lis[k].className = "active";
}

//team
var boxs = document.querySelectorAll(".section4 .boxs .box");
var b1s = document.querySelectorAll(".section4 .boxs .box .b1");
boxs.forEach(box => {
    box.onclick = function () {
        b1s.forEach(v => {
            v.className = "text b1";
            v.lastElementChild.style.display = "none";
            v.lastElementChild.previousElementSibling.style.display = "block";
        })
        this.lastElementChild.className = "active b1";
        this.lastElementChild.lastElementChild.style.display = "-webkit-box";
        this.lastElementChild.lastElementChild.previousElementSibling.style.display = "none";
    }
})